<template>
	<view class="main">
		<nav-bar>营业执照认证</nav-bar>
	<view class="uploadbody">
		<view class="uploadtip">
		<text>请务必按照示例要求上传企业营业执照的清晰照片</text>
			<image src="../../../../static/yyzz.jpeg" mode="widthFix"></image>
		</view>
		<view class="u-demo-area">
			<u-toast ref="uToast"></u-toast>
			<view class="pre-box" v-if="!showUploadList">
				<view class="pre-item" v-for="(item, index) in lists" :key="index">
					<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
					<view class="u-delete-icon" @tap.stop="deleteItem(index)">
						<u-icon name="close" size="20" color="#ffffff"></u-icon>
					</view>
					<u-line-progress v-if="item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress"
					 :percent="item.progress"></u-line-progress>
				</view>
			</view>
			<u-upload @on-choose-fail="onChooseFail" :before-remove="beforeRemove" ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
			 :show-progress="showProgress" :deletable="deletable" :max-count="maxCount" @on-list-change="onListChange">
				<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
				</view>
			</u-upload>
			<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
			<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> -->
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://localhost:9090/becomeTheEnterprise',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				formData:{
					ID:1
				},
				// 预置上传列表
				fileList: [],
				// fileList: [{
				// 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				// 	error: false,
				// 	progress: 100
				// }],
				showUploadList: true,
				customBtn: true,
				autoUpload: false,
				showProgress: true,
				deletable: true,
				customStyle: true,
				maxCount: 1,
				lists: [], // 组件内部的文件列表
				UserID:'',
			}
		},
		mounted() {
			try {
				const value = uni.getStorageSync('setUserData');
				this.UserID = value.user_id
				this.action='http://localhost:9090/becomeTheEnterprise'+'/'+this.UserID
			
			} catch (e) {
				// error
			}
		},
		methods: {
			reUpload() {
				this.$refs.uUpload.reUpload();
			},
			clear() {
				this.$refs.uUpload.clear();
			},
			upload() {
				this.$refs.uUpload.upload();
			},
			deleteItem(index) {
				this.$refs.uUpload.remove(index);
			},
			onOversize(file, lists) {
				// console.log('onOversize', file, lists);
			},
			onPreview(url, lists) {
				// console.log('onPreview', url, lists);
			},
			onRemove(index, lists) {
				// console.log('onRemove', index, lists);
			},
			onSuccess(data, index, lists) {
				// console.log('onSuccess', data, index, lists);
			},
			onChange(res, index, lists) {
				// console.log('onChange', res, index, lists);
			},
			error(res, index, lists) {
				// console.log('onError', res, index, lists);
			},
			onProgress(res, index, lists) {
				// console.log('onProgress', res, index, lists);
			},
			onUploaded(lists) {
				// console.log('onUploaded', lists);
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			onChooseFail(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.uploadbody{
		margin-left: 60rpx;
		margin-right: 60rpx;
	}
	.uploadtip{
		margin-top: 60rpx;
		font-size: 40rpx;
	}
	
	.u-add-wrap {
		flex-direction: column;
		color: $u-content-color;
		font-size: 28rpx;
	}
	
	/deep/ .slot-btn {
		width: 600rpx;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 30rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 140rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.u-progress {
		position: absolute;
		bottom: 10rpx;
		left: 8rpx;
		right: 8rpx;
		z-index: 9;
		width: auto;
	}

	.pre-item-image {
		width: 100%;
		height: 140rpx;
	}

	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		background-color: $u-type-error;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
